
<template>
  <div class="app-container home">
    <h1 class="title">欢迎使用北京科技大学教材监控系统</h1>
    <el-divider />
    <div class="inputWrqpper">
      <div>
        <el-input class="input-with-select" @keyup.native.enter="searchByName" placeholder="可按书名｜作者｜出版社｜ISBN 搜索" v-model="inputValue" clearable>
          <el-button slot="append" type="primary" plain @click.native="searchByName">
            搜索
          </el-button>
        </el-input>
      </div>
    </div>
    <!-- <div class="mainHeader" v-if="isShowDetail">共搜索到 {{ total }} 本教材</div> -->
    <div class="main" v-if="isShowDetail">
      <div class="item" v-for="item in list" :key="item.id">
        <div class="itemLeft">
          <img width="100px" height="120px" :src="item.book_avatar" alt="" />
        </div>
        <div class="itemRight">
          <h4 style="cursor: pointer;" @click="openDetail(item)">{{ item.book_name }}</h4>
          <el-descriptions>
            <el-descriptions-item label="作者">{{ item.book_author }}</el-descriptions-item>
            <el-descriptions-item label="书名">{{ item.book_name }}</el-descriptions-item>
            <el-descriptions-item label="出版社">{{ item.book_press }}</el-descriptions-item>
            <el-descriptions-item label="ISBN">{{ item.isbn_code }}</el-descriptions-item>
            <el-descriptions-item v-if="item.comprehensive_score">
              <template slot="label"> 查看详情 </template>
              <div class="resultDetail" @click="openDetail(item)">
                评价结果
              </div>
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </div>
    </div>
    <div class="pages" v-if="isShowDetail && total > 10">
      <el-pagination background layout="prev, pager, next" :total="total"
        @current-change="handleCurrentChange"></el-pagination>
    </div>
  </div>
</template>

<script>
import { getBookList } from "@/api/bkmanage/home";
export default {
  data() {
    return {
      inputValue: "",
      list: [],
      total: 0,
      isShowDetail: false,
      currentPage: 1
    };
  },
  created() { 
    this.searchByName()
  },
  methods: {
    // 点击查询按钮
    searchByName() {
      this._commonGetData(1)
    },
    // 点击分页数字
    handleCurrentChange(current) {
      this._commonGetData(current)
    },
    // 条件满足的情况下跳转到详情页
    openDetail(data) {
      this.$router.push({ name: "book-detail", params: { data: JSON.stringify(data) } });
    },
    // 获取数据的内部方法
    _commonGetData(cur) {
      const params = {
        searchContent: this.inputValue,
        pageSize: 10,
        pageNum: cur
      };
      getBookList(params).then((res) => {
        if (res.code === 200) {
          this.list = res.rows
          this.total = res.total
          if (this.total && this.total > 0) {
            this.isShowDetail = true
          } else {
            this.isShowDetail = false
            this.$message({
              message: '查询成功，但是未找到你想要的书',
              type: 'success'
            });
          }
        }
      });
    }
  },
};
</script>
<style lang="scss" scoped>
.home {
  display: flex;
  flex-direction: column;
  height: 90vh;

  .title {
    text-align: center;
  }

  .inputWrqpper {
    width: 80%;
    margin: 40px auto;
  }

  .mainHeader {
    margin: 20px 0;
  }

  .main {
    flex: 1;
    overflow: auto;
    background: #f9f9f9;
    padding: 10px;

    .mainHeader {
      display: flex;
    }

    .item {
      display: flex;
      align-items: center;
      background: #fff;
      margin: 10px 0;

      .itemLeft {
        width: 100px;
        height: 120px;
        background: rgb(226, 233, 233);
        border-radius: 5px;
      }

      .itemRight {
        flex: 1;
        padding-left: 20px;

        .resultDetail {
          color: #409eff;
          border-bottom: 1px solid #409eff;
          cursor: pointer;
        }
      }
    }
  }

  .pages {
    margin-top: 20px;
  }
}
</style>

